<!--
 * @Descripttion: 平台公告
 * @version: v1.0.0
 * @Author: 穆宏宇
 * @Date: 2021-01-26 13:09
 * @LastEditors: Administrator
 * @LastEditTime: 2021-01-26 13:09
-->
<template>
  <div class="system" v-if="isClose">
    <div class="system-notice">
      <div class="system-notice-left">
        <img class="icon" src="~@/assets/notice.gif" alt="公告" width="16" height="14">
        <span class="title">温馨提示 ：</span>
      </div>
      <div class="system-notice-centre">
        <ul class="system-notice-centre-ul" :style="{left: disx + 'px'}">
          <li ref="notice" class="system-notice-centre-li" :class="{anim:animate==true}" v-for="item in list" :key="item.id">
            <!-- <a :href="'/notice-details?id=' + item.id" :title="item.noticeTitle" @mouseenter=mouseenter() @mouseleave=mouseleave()>{{item.noticeTitle}}</a> -->
            <a @click="goNav(item.id)"  :title="item.noticeTitle">{{item.noticeTitle}}</a>
          </li>
        </ul>
      </div>
      <div class="system-notice-right" @click="isClose = !isClose">
        <i class="el-icon-close " ></i>
      </div>

    </div>
  </div>
</template>

<script>
  import {queryUnitenotices} from "@/api/mall.api";

  export default {
    name: "common-sys-notice",
    components: {},
    props: {},
    data() {
      return {
        animate:true,
        isClose: true,
        list: [],
        disx: 10, //位移距离
        time: null,
        marqueeW: 0
      }
    },
    computed: {},
    watch: {},
    filters: {},
    created() {

    },
    mounted() {
      this.$nextTick(()=>{
        this.queryUnitenoticesFn()
      })
    },
    methods: {
		goNav(id){
			this.$router.push({
				path:"/noticeMobileDetail?id="+id
			})
		},
      // 查询公告信息
      queryUnitenoticesFn (){
        const self = this
        const data = {
          current: 1,
          size: 3,
          noticeType: 3
        }
        queryUnitenotices (data).then(res=>{
          self.list = res.records
          self.time = setInterval(this.scroll,2000)
        })
      },
      /**
      * @functionName runMarquee
      * @desccription 定时滚动
      * @author 穆宏宇
      * @date 2021-01-26 15:43:17
      * @version v1.0.0
      */
      runMarquee () {
        if (this.list.length > 0) {
          this.time = setInterval(this.scroll,2000)
        }
      },
      scroll () {
        let con1 = this.$refs.notice
        if (con1.length <= 0) return
        con1[0].style.marginTop='30px'
        this.animate=!this.animate
        const that = this // 在异步函数中会出现this的偏移问题，此处一定要先保存好this的指向
        setTimeout(function(){
          that.list.push(that.list[0])
          that.list.shift()
          con1[0].style.marginTop='0px'
          that.animate=!that.animate  // 这个地方如果不把animate 取反会出现消息回滚的现象，此时把ul 元素的过渡属性取消掉就可以完美实现无缝滚动的效果了
        },0)
      },
      /**
      * @functionName mouseenter
      * @desccription 鼠标移入暂停
      * @author 穆宏宇
      * @date 2021-01-26 15:44:31
      * @version v1.0.0
      */
      mouseenter () {
        if (this.time) {
          clearInterval(this.time)
        }
      },
      /**
      * @functionName mouseleave
      * @desccription 鼠标移出继续滚动
      * @author 穆宏宇
      * @date 2021-01-26 15:44:57
      * @version v1.0.0
      */
      mouseleave () {
        this.runMarquee()
      }
    },
    beforeDestroy() {
      if (this.time.value) {
        clearInterval(this.time)
      }
    },
    destroyed() {}
  }
</script>

<style scoped lang="scss">
.system {
  background-color: #fff7ea;
  border: 1px solid #fff7ea;
  color: #8e3f2a;
  font-size: 12px;
  &-notice {
    width: 1200px;
    margin: 0 auto;
    display: flex;
    flex-direction: row;
    &-left {
      width: 100px;
      line-height: 24px;
      .icon {
        vertical-align: middle;
      }
      .title {
        padding: 0 5px;
        vertical-align: middle;
      }
    }
    &-centre {
      width:100%;
      height:26px;
      overflow: hidden;
      transition: all 0.5s;
      &-ul{
        white-space:nowrap;
      }
      &-li {
        margin-right:10px;
        height: 24px;
        line-height: 24px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        a {
          color: #8e3f2a !important;
        }
      }
    }
    &-right {
      line-height: 24px;
      font-size: 18px !important;
    }
  }
  .anim{
    transition: all 0.5s;
  }
}

</style>
